<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Canvas基础</title>

  <style>
    #app {
      border: 2px blue dashed;
    }
  </style>
</head>

<body>
  <canvas id="app" width="500" height="300"></canvas>
  <script>
    // https://www.runoob.com/w3cnote/html5-canvas-intro.html
    const ctx = getCanvasContext2D()

    // 样例
    rect()
    path()
    lineStyle()
    lineDash()
    text()

    testBeginPath()

    /**
     * 获取canvas上下文对象2D版本，此处加入jsdoc以便可以获得vscode的代码提示
     * @return {CanvasRenderingContext2D}
     */
    function getCanvasContext2D() {
      var canvas = document.getElementById('app')
      return canvas.getContext('2d')
    }

    // 矩形: 填充、边框、清除
    function rect() {
      ctx.save()
      // 填充矩形
      ctx.fillRect(10, 10, 55, 50)

      // 改变填充颜色
      ctx.fillStyle = 'rgba(50,50,50,0.5)'

      // 绘制矩形边框
      ctx.strokeRect(30, 30, 55, 50)

      // 清除矩形
      ctx.clearRect(15, 15, 30, 30)
      ctx.restore()
    }

    // 路径： 起点、移动到、绘制到、闭合
    function path() {
      ctx.save()
      ctx.beginPath()
      ctx.moveTo(100, 100)
      ctx.lineTo(200, 100)
      ctx.lineTo(200, 200)
      ctx.closePath()

      //ctx.fill()
      // 改变路径颜色
      ctx.strokeStyle = 'red'

      // 绘制路径
      ctx.stroke()
      ctx.restore()
    }

    // 绘制圆弧、贝塞尔曲线：略

    // 线条粗细、末端样式、接合处样式
    function lineStyle() {
      ctx.save()
      ctx.beginPath()
      ctx.moveTo(300, 100)
      ctx.lineTo(300, 150)
      ctx.lineTo(350, 150)
      ctx.lineWidth = 10
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      ctx.stroke()
      ctx.restore()
    }

    // 虚线
    function lineDash() {
      ctx.save()
      ctx.setLineDash([5, 5]) // [实线长度, 间隙长度]
      ctx.lineDashOffset = 0 // 起始偏移量

      ctx.beginPath()
      ctx.moveTo(400, 50)
      ctx.lineTo(400, 200)
      ctx.stroke()
      ctx.restore()
    }

    // 绘制文本
    function text() {
      ctx.save()
      ctx.font = '40px sans-serif'
      ctx.fillText('鼠标手势', 10, 250)
      ctx.strokeText('鼠标手势', 200, 250)
      ctx.restore()
    }

    // 绘制图片、缩放图片、剪裁图片 drawImage

    // 状态的保存和恢复: save/restore

    // 移动canvas原点、旋转坐标轴、缩放、变形矩阵、合成、裁剪路径、动画（定时重绘）
    // translate/rotate/scale/transform/globalCompositeOperation/clip

    // beginPath/closePath作用
    function testBeginPath(){
      ctx.save()
      ctx.lineWidth = 5
      ctx.strokeStyle = 'rgba(0,0,100,0.5)'
      ctx.beginPath()
      ctx.moveTo(100, 50)
      ctx.lineTo(200, 50)
      ctx.lineTo(200, 30)
      ctx.closePath()      // 闭合时自动连接到起始点
      ctx.stroke()

      ctx.beginPath()      // 开启新路径则上面的路径不会绘制2遍
      ctx.moveTo(100, 80)
      ctx.lineTo(200, 80)
      ctx.lineTo(200, 60)
      ctx.stroke()

      ctx.restore()
    }
  </script>
</body>

</html>